// 开启代码扫描，需用户承诺书
import React from 'react';
import PropTypes from 'prop-types';
import { Dialog, Checkbox } from '@teamix/ui';
import './index.scss';
import intl from '../../../../../../../../../../../locale';

export default class ProjectModal extends React.Component {
  static propTypes = {
    okFn: PropTypes.func,
    closeFn: PropTypes.func,
  };

  static defaultProps = {
    okFn: () => {},
    closeFn: () => {},
  };

  constructor(props) {
    super(props);
    this.state = {
      isModalOpen: true,
      isSelected: false,
    };
  }

  static getDerivedStateFromProps(props) {
    if (props.trigger) {
      return {};
    }
    return {
      isModalOpen: props.isModalOpen,
    };
  }

  componentWillUnmount() {
    this.setState({
      isSelected: false,
    });
  }

  showModal = () => {
    this.setState({
      isModalOpen: true,
    });
  };

  onClose = () => {
    this.props.closeFn();
  };

  handleOk = () => {
    if (!this.state.isSelected) {
      return null;
    }
    this.props.okFn();
  };

  toggleSelect = (value) => {
    this.setState({
      isSelected: value,
    });
  };

  render() {
    const { isOpeningService } = this.props;
    const taskName = intl.get({
      id: 'code-assets.sensitiveInfoReport.guaranteeModal.SensitiveInformationDetection',
      defaultMessage: '敏感信息检测',
    });
    return (
      <React.Fragment>
        {this.state.isModalOpen ? (
          <Dialog
            title={
              <div className="guarantee-title">
                {intl.get({
                  id: 'code-assets.sensitiveInfoReport.guaranteeModal.UserCommitmentLetter',
                  defaultMessage: '用户承诺书',
                })}
              </div>
            }
            visible
            style={{ width: '600px' }}
            onOk={this.handleOk}
            onCancel={this.onClose}
            onClose={this.onClose}
            okProps={{ disabled: !this.state.isSelected, loading: isOpeningService }}
          >
            <div className="guarantee-text">
              {intl.get(
                {
                  id: 'code-assets.sensitiveInfoReport.guaranteeModal.YouUnderstandAndConfirmThat',
                  defaultMessage:
                    '1、您理解并确认，基于您要求Codeup提供{taskName}服务的要求，您授权同意Codeup读取、加工（统称为“处理”） 您或您客户的代码库数据，Codeup将通过对前述数据的处理进而为您提供{taskName}服务。',
                },
                { taskName },
              )}
            </div>
            <div className="guarantee-text">
              {intl.get({
                id: 'code-assets.sensitiveInfoReport.guaranteeModal.BothYouAndCodeupUnderstand',
                defaultMessage:
                  '2、您和Codeup均理解并确认，Codeup除为执行您的服务指令进行如上处理和使用目的外，不做其他任何用途。',
              })}
            </div>
            <div className="guarantee-text">
              {intl.get(
                {
                  id: 'code-assets.sensitiveInfoReport.guaranteeModal.YouUnderstandAndAgreeTo',
                  defaultMessage:
                    '3、您理解并同意该用户授权承诺书，勾选服务开通，您即授权同意Codeup将前述您的数据用于为您提供{taskName}服务的用途，因此，请您理解并确认用户承诺书中的内容，并谨慎操作开通。',
                },
                { taskName },
              )}
            </div>
            <div className="guarantee-text">
              {intl.get(
                {
                  id: 'code-assets.sensitiveInfoReport.guaranteeModal.IfYouNoLongerUse',
                  defaultMessage:
                    '4、如果您不再继续使用{taskName}服务，请您通过点击【关闭服务】取消就Codeup对您前述数据进行处理的同意授权，Codeup将自您取消授权同意之日起，不再继续处理您的数据，您亦不能继续使用Codeup{taskName}服务。',
                },
                { taskName },
              )}
            </div>
            <div className="guarantee-text">
              {intl.get({
                id: 'code-assets.sensitiveInfoReport.guaranteeModal.YouFullyUnderstandAndAcknowledge',
                defaultMessage:
                  '5­、您充分知晓并认可，Codeup尽勤勉义务向您提供服务，Codeup所提供的技术服务和/或可交付成果物仅仅是当时情况下给出的技术建议，Codeup的服务仅按照现有技术和条件所能达到的现状提供。',
              })}
            </div>
            <div className="guarantee-checkbox">
              <Checkbox checked={this.state.isSelected} onChange={this.toggleSelect}>
                {intl.get({
                  id: 'code-assets.sensitiveInfoReport.guaranteeModal.IHaveReadTheRelevant',
                  defaultMessage: '我已阅读相关协议并确认开通服务',
                })}
              </Checkbox>
            </div>
          </Dialog>
        ) : null}
        {!!this.props.trigger &&
          React.cloneElement(this.props.trigger, { onClick: this.showModal })}
      </React.Fragment>
    );
  }
}
